<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      margin: 0;
    }
    .father{
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: #ff4933;
      margin: 150px;
    }
    .son {
      width: 50px;
      height: 50px;
      background-color: #5f25cc;
      margin: 50px;
      padding: 0 50px;
    }
  </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<script>
  var father = document.querySelector('.father');
  var son = document.querySelector('.son');

  console.log(father.offsetLeft); // => 150
  console.log(son.offsetTop);       // => 50

  console.log(son.offsetWidth);  // => 150
  console.log(son.offsetHeight); // => 50

  console.log(son.offsetParent); // =>  <div class="father"><div class="son"></div></div>
</script>
</body>
</html>